<script lang="ts">
import {mapState} from "vuex";
import {debounce} from "lodash";
import {goodsNumReg} from "@/utils/reg";
export default {
    name: "InfoWrap",
    computed: mapState("product", {
        skuInfo(state) {
            return state.goodsInfo.skuInfo;
        },
        spuSaleAttrList(state) {
            return state.goodsInfo.spuSaleAttrList;
        }
    }),
    methods:{
        goDetail(goodsId){
            if(!goodsId) return;
            this.$router.push(`/detail/${goodsId}.html`);
        },
        setBuyNum:debounce(function(e){
            const buyNum = e.target.value.trim()/1;
            if(goodsNumReg.test(buyNum)){
                this.buyNum = buyNum;
            }else{
                e.target.value = this.buyNum;
            }
        },500)
    },
    data(){
        return {
            buyNum:1
        }
    },
    watch:{
        buyNum(newValue){
            if(newValue<1) this.buyNum=1;
            else if(newValue>999) this.buyNum=999;
        }
    },
}
</script>

<template>
    <div class="InfoWrap">
        <div class="goodsDetail">
            <h3 class="InfoName">{{ skuInfo.fullName }}</h3>
            <p class="news">{{ skuInfo.description }}</p>
            <div class="priceArea">
                <div class="priceArea1">
                    <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                    <div class="price">
                        <i>¥</i>
                        <em>{{ skuInfo.price }}</em>
                        <span>降价通知</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="choose">
            <div class="chooseArea">
                <div class="choosed"></div>
                <dl v-for="item in spuSaleAttrList.filter(v=>v.valueArr.some(attr=>attr.isChecked))" :key="item.id">
                    <dt class="title">选择{{item.name}}:</dt>
                    <dd @click="goDetail(info.goodsId)" :class="{active:info.isChecked}" v-for="info in item.valueArr" :key="info.id">{{info.name}}</dd>
                </dl>
            </div>

            <div class="cartWrap">
                <div class="controls">
                    <input @input="setBuyNum" autocomplete="off" :value="buyNum" class="itxt">
                    <a @click.prevent="buyNum++" class="plus">+</a>
                    <a @click.prevent="buyNum--" class="mins">-</a>
                </div>
                <div class="add">
                    <a @click.prevent="$router.push('/addCart?buyNum='+buyNum)">加入购物车</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.InfoWrap{
    width: 700px;
    float: right;
    .InfoName{
        font-size: 14px;
        line-height: 21px;
        margin-top: 15px;
    }
    .news{
        color: #e12228;
        margin-top: 15px;
    }
    .priceArea {
        background: #fee9eb;
        padding: 7px;
        margin: 13px 0;
        .priceArea1{
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;
            .title {
                float: left;
                margin-right: 15px;
            }
            .price {
                float: left;
                color: #c81623;
                i {
                    font-size: 16px;
                }
                em {
                    font-size: 24px;
                    font-weight: 700;
                }
                span {
                    font-size: 12px;
                }
            }
            .remark{
                float: right;
            }
        }
        .priceArea2{
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;
            .title {
                margin-right: 15px;
                float: left;
            }
            .fixWidth {
                width: 520px;
                float: left;
                .red-bg {
                    background: #c81623;
                    color: #fff;
                    padding: 3px;
                }
                .t-gray {
                    color: #999;
                }
            }
        }


    }
    .support {
        border-bottom: 1px solid #ededed;
        padding-bottom: 5px;
        .supportArea {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;
            .title {
                margin-right: 15px;
                float: left;
            }
            .fixWidth{
                width: 520px;
                float: left;
                color: #999;
            }
        }
    }
    .choose{
        .chooseArea{
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;
            .choosed{
                mark{
                    height: 30px;
                    display: inline-block;
                    line-height: 30px;
                    background-color: snow;
                    border: 1px solid #ddd;
                    padding: 0 20px;
                    margin-right: 20px;
                    a{
                        font-size: 12px;
                        color: red;
                        margin-left: 20px;
                        cursor: pointer;
                    }
                }
            }
            dl{
                overflow: hidden;
                margin: 13px 0;
                dt{
                    margin-right: 15px;
                    float: left;
                }
                dd{
                    float: left;
                    margin-right: 5px;
                    //color: #666;
                    line-height: 24px;
                    padding: 2px 14px;
                    border-top: 1px solid #eee;
                    border-right: 1px solid #bbb;
                    border-bottom: 1px solid #bbb;
                    border-left: 1px solid #eee;
                    &.active{
                        color: red;
                    }
                }
            }
        }
        .cartWrap{
            .controls{
                width: 48px;
                position: relative;
                float: left;
                margin-right: 15px;
                .itxt {
                    width: 38px;
                    height: 37px;
                    border: 1px solid #ddd;
                    color: #555;
                    float: left;
                    border-right: 0;
                    text-align: center;
                }
                .plus, .mins{
                    width: 15px;
                    text-align: center;
                    height: 17px;
                    line-height: 17px;
                    background: #f1f1f1;
                    color: #666;
                    position: absolute;
                    right: -8px;
                    border: 1px solid #ccc;
                }
                .mins {
                    right: -8px;
                    top: 19px;
                    border-top: 0;
                }
                .plus{
                    right: -8px;
                }
            }
            .add{
                float: left;
                a{
                    background-color: #e1251b;
                    padding: 0 25px;
                    font-size: 16px;
                    color: #fff;
                    height: 36px;
                    line-height: 36px;
                    display: block;
                }
            }
        }
    }
}
</style>
